import React from 'react';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';

const Bar3 = () =>{
  const dataMap = {};
  function dataFormatter(obj) {
      const pList = ['北京','天津','上海','浙江','安徽'];
      let temp;
      for (let year = 2002; year <= 2011; year++) {
          let max = 0;
          let sum = 0;
          temp = obj[year];
          for (let i = 0, l = temp.length; i < l; i++) {
              max = Math.max(max, temp[i]);
              sum += temp[i];
              obj[year][i] = {
                  name : pList[i],
                  value : temp[i]
              }
          }
          obj[year + 'max'] = Math.floor(max / 100) * 100;
          obj[year + 'sum'] = sum;
      }
      return obj;
  }

  dataMap.dataGDP = dataFormatter({
      //max : 60000,
      2011:[16251.93,11307.28,24515.76,11237.55,14359.88],
      2010:[14113.58,9224.46,20394.26,9200.86,11672],
      2009:[12153.03,7521.85,17235.48,7358.31,9740.25],
      2008:[11115,6719.01,16011.97,7315.4,8496.2],
      2007:[9846.81,5252.76,13607.32,6024.45,6423.18],
      2006:[8117.78,4462.74,11467.6,4878.61,4944.25],
      2005:[6969.52,3905.64,10012.11,4230.53,3905.03],
      2004:[6033.21,3110.97,8477.63,3571.37,3041.07],
      2003:[5007.21,2578.03,6921.29,2855.23,2388.38],
      2002:[4315,2150.76,6018.28,2324.8,1940.94]
  });

  dataMap.dataPI = dataFormatter({
      //max : 4000,
      2011:[136.27,159.72,2905.73,641.42,1306.3],
      2010:[124.36,145.58,2562.81,554.48,1095.28],
      2009:[118.29,128.85,2207.34,477.59,929.6],
      2008:[112.83,122.58,2034.59,313.58,907.95],
      2007:[101.26,110.19,1804.72,311.97,762.1],
      2006:[88.8,103.35,1461.81,276.77,634.94],
      2005:[88.68,112.38,1400,262.42,589.56],
      2004:[87.36,105.28,1370.43,276.3,522.8],
      2003:[84.11,89.91,1064.05,215.19,420.1],
      2002:[82.44,84.21,956.84,197.8,374.69]
  });

  dataMap.dataSI = dataFormatter({
      //max : 26600,
      2011:[3752.48,5928.32,13126.86,6635.26,1150.81],
      2010:[3388.38,4840.23,10707.68,5234,1019.68],
      2009:[2855.55,3987.84,8959.83,3993.8,3709.78],
      2008:[2626.41,3709.78,8701.34,4242.36,6068.31],
      2007:[2509.4,2892.53,7201.88,3454.49,3417.56],
      2006:[2191.43,2457.08,6110.43,2755.66,1150.81],
      2005:[2026.51,2135.07,5271.57,2357.04,2439.68],
      2004:[1853.58,1685.93,4301.73,1919.4,6068.31],
      2003:[1487.15,1337.31,3417.56,1463.38,3709.78],
      2002:[1249.99,1069.08,2911.69,1134.31,1019.68]
  });

  dataMap.dataTI = dataFormatter({
      //max : 25000,
      2011:[12363.18,5219.24,8483.17,3960.87,6068.31],
      2010:[10600.84,4238.65,7123.77,3412.38,1150.81],
      2009:[9179.19,3405.16,6068.31,2886.92,1019.68],
      2008:[8375.76,2886.65,5276.04,2759.46,2439.68],
      2007:[7236.15,2250.04,4600.72,2257.99,3709.78],
      2006:[5837.55,1902.31,3895.36,1846.18,6068.31],
      2005:[4854.33,1658.19,3340.54,1611.07,2439.68],
      2004:[4092.27,1319.76,2805.47,1375.67,3709.78],
      2003:[3435.95,1150.81,2439.68,1176.65,1019.68],
      2002:[2982.57,997.47,2149.75,992.69,1150.81]
  });

  dataMap.dataEstate = dataFormatter({
      //max : 3600,
      2011:[136.27,159.72,2905.73,641.42,1306.3],
      2010:[124.36,145.58,2562.81,554.48,1095.28],
      2009:[118.29,128.85,2207.34,477.59,929.6],
      2008:[112.83,122.58,2034.59,313.58,907.95],
      2007:[101.26,110.19,1804.72,311.97,762.1],
      2006:[88.8,103.35,1461.81,276.77,634.94],
      2005:[88.68,112.38,1400,262.42,589.56],
      2004:[87.36,105.28,1370.43,276.3,522.8],
      2003:[84.11,89.91,1064.05,215.19,420.1],
      2002:[82.44,84.21,956.84,197.8,374.69]
  });

  dataMap.dataFinancial = dataFormatter({
      //max : 3200,
      2011:[3752.48,5928.32,13126.86,6635.26,1150.81],
      2010:[3388.38,4840.23,10707.68,5234,1019.68],
      2009:[2855.55,3987.84,8959.83,3993.8,3709.78],
      2008:[2626.41,3709.78,8701.34,4242.36,6068.31],
      2007:[2509.4,2892.53,7201.88,3454.49,3417.56],
      2006:[88.8,103.35,1461.81,276.77,634.94],
      2005:[88.68,112.38,1400,262.42,589.56],
      2004:[87.36,105.28,1370.43,276.3,522.8],
      2003:[3435.95,1150.81,2439.68,1176.65,1019.68],
      2002:[2982.57,997.47,2149.75,992.69,1150.81]
  });


  const option = {
      baseOption: {

          timeline: {
              // show:false,
              // y: 0,
              axisType: 'category',
              // realtime: false,
              // loop: false,
              autoPlay: true,
              // currentIndex: 2,
              playInterval: 1000,
              // controlStyle: {
              //     position: 'left'
              // },
              lineStyle: {
                // color:'#FFF',
              },
              itemStyle: {
                normal:{
                  color:'#FFF'
                },
                emphasis:{
                  color:'#2a77d2'
                }
              },
              checkpointStyle:{
                color:'rgb(85, 146, 250)',
                borderColor:'rgb(85, 146, 250)',
                borderWidth:1,
              },
              controlStyle:{
                normal:{
                  borderColor:'#FFF'
                },
                emphasis:{
                  borderColor:'#2a77d2'
                }
              },
              data: [
                  '2002-01-01','2003-01-01','2004-01-01',
                  {
                      value: '2005-01-01',
                      tooltip: {
                          formatter: '{b} GDP达到一个高度'
                      },
                      symbol: 'diamond',
                      symbolSize: 16
                  },
                  '2006-01-01', '2007-01-01','2008-01-01','2009-01-01','2010-01-01',
                  {
                      value: '2011-01-01',
                      tooltip: {
                          formatter: function (params) {
                              return params.name + 'GDP达到又一个高度';
                          }
                      },
                      symbol: 'diamond',
                      symbolSize: 18
                  },
              ],
              label: {
                  formatter : function(s) {
                      return (new Date(s)).getFullYear();
                  },
                  normal:{
                    color:'#FFF'
                  }
              }
          },
          // title: {
          //     subtext: '数据来自国家统计局',
          //     textStyle:{
          //       color:'#FFF'
          //     }
          // },
          tooltip: {
          },
          legend: {
              x: 'right',
              data: ['第一产业', '第二产业', '第三产业', 'GDP', '金融', '房地产'],
              selected: {
                  'GDP': false, '金融': false, '房地产': false
              },
              textStyle:{
                color:'#FFF'
              },
              width:'50%',
          },
          calculable : true,
          grid: {
              top: 80,
              bottom: 80,
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'shadow',
                      label: {
                          show: true,
                          formatter: function (params) {
                              return params.value.replace('\n', '');
                          }
                      }
                  }
              }
          },
          xAxis: [
              {
                  'type':'category',
                  'axisLabel':{'interval':0},
                  'data':[{
                      value:'北京',
                      textStyle:{
                        color:'#FFF'
                      }
                    },{
                        value:'天津',
                        textStyle:{
                          color:'#FFF'
                        }
                    },{
                        value:'上海',
                        textStyle:{
                          color:'#FFF'
                        }
                    },{
                        value:'安徽',
                        textStyle:{
                          color:'#FFF'
                        }
                    },{
                        value:'浙江',
                        textStyle:{
                          color:'#FFF'
                        }
                      },

                  ],
                  splitLine: {show: false}
              }
          ],
          yAxis: [
              {
                  type: 'value',
                  name: 'GDP（亿元）',
                  axisLine: {
                      lineStyle: {
                          color: '#FFF'
                      }
                  },
                  nameTextStyle:{
                    color:'#FFF',
                  }
              }
          ],
          color: ['#ecff53','#6fbb60', '#61a0a8', '#4ed1d5', '#6b76dd','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
          series: [
              {name: 'GDP', type: 'bar'},
              {name: '金融', type: 'bar'},
              {name: '房地产', type: 'bar'},
              {name: '第一产业', type: 'bar'},
              {name: '第二产业', type: 'bar'},
              {name: '第三产业', type: 'bar'},
              {
                  name: 'GDP占比',
                  type: 'pie',
                  center: ['75%', '35%'],
                  radius: '28%',
                  z: 100
              }
          ]
      },
      options: [
          {
              title: {
                text: '2002全国宏观经济指标',
                textStyle:{
                  color:'#FFF'
                }
            },
              series: [
                  {data: dataMap.dataGDP['2002']},
                  {data: dataMap.dataFinancial['2002']},
                  {data: dataMap.dataEstate['2002']},
                  {data: dataMap.dataPI['2002']},
                  {data: dataMap.dataSI['2002']},
                  {data: dataMap.dataTI['2002']},
                  {data: [
                      {name: '第一产业', value: dataMap.dataPI['2002sum']},
                      {name: '第二产业', value: dataMap.dataSI['2002sum']},
                      {name: '第三产业', value: dataMap.dataTI['2002sum']}
                  ]}
              ]
          },
          {
              title : {
                text: '2003全国宏观经济指标',
                textStyle:{
                  color:'#FFF'
                }
              },
              series : [
                  {data: dataMap.dataGDP['2003']},
                  {data: dataMap.dataFinancial['2003']},
                  {data: dataMap.dataEstate['2003']},
                  {data: dataMap.dataPI['2003']},
                  {data: dataMap.dataSI['2003']},
                  {data: dataMap.dataTI['2003']},
                  {data: [
                      {name: '第一产业', value: dataMap.dataPI['2003sum']},
                      {name: '第二产业', value: dataMap.dataSI['2003sum']},
                      {name: '第三产业', value: dataMap.dataTI['2003sum']}
                  ]}
              ]
          },
          {
              title : {
                text: '2004全国宏观经济指标',
                textStyle:{
                  color:'#FFF'
                }
              },
              series : [
                  {data: dataMap.dataGDP['2004']},
                  {data: dataMap.dataFinancial['2004']},
                  {data: dataMap.dataEstate['2004']},
                  {data: dataMap.dataPI['2004']},
                  {data: dataMap.dataSI['2004']},
                  {data: dataMap.dataTI['2004']},
                  {data: [
                      {name: '第一产业', value: dataMap.dataPI['2004sum']},
                      {name: '第二产业', value: dataMap.dataSI['2004sum']},
                      {name: '第三产业', value: dataMap.dataTI['2004sum']}
                  ]}
              ]
          },
          {
              title : {
                text: '2005全国宏观经济指标',
                textStyle:{
                  color:'#FFF'
                }
              },
              series : [
                  {data: dataMap.dataGDP['2005']},
                  {data: dataMap.dataFinancial['2005']},
                  {data: dataMap.dataEstate['2005']},
                  {data: dataMap.dataPI['2005']},
                  {data: dataMap.dataSI['2005']},
                  {data: dataMap.dataTI['2005']},
                  {data: [
                      {name: '第一产业', value: dataMap.dataPI['2005sum']},
                      {name: '第二产业', value: dataMap.dataSI['2005sum']},
                      {name: '第三产业', value: dataMap.dataTI['2005sum']}
                  ]}
              ]
          },
          {
              title : {
                text: '2006全国宏观经济指标',
                textStyle:{
                  color:'#FFF'
                }
              },
              series : [
                  {data: dataMap.dataGDP['2006']},
                  {data: dataMap.dataFinancial['2006']},
                  {data: dataMap.dataEstate['2006']},
                  {data: dataMap.dataPI['2006']},
                  {data: dataMap.dataSI['2006']},
                  {data: dataMap.dataTI['2006']},
                  {data: [
                      {name: '第一产业', value: dataMap.dataPI['2006sum']},
                      {name: '第二产业', value: dataMap.dataSI['2006sum']},
                      {name: '第三产业', value: dataMap.dataTI['2006sum']}
                  ]}
              ]
          },
          {
              title : {
                text: '2007全国宏观经济指标',
                textStyle:{
                  color:'#FFF'
                }
              },
              series : [
                  {data: dataMap.dataGDP['2007']},
                  {data: dataMap.dataFinancial['2007']},
                  {data: dataMap.dataEstate['2007']},
                  {data: dataMap.dataPI['2007']},
                  {data: dataMap.dataSI['2007']},
                  {data: dataMap.dataTI['2007']},
                  {data: [
                      {name: '第一产业', value: dataMap.dataPI['2007sum']},
                      {name: '第二产业', value: dataMap.dataSI['2007sum']},
                      {name: '第三产业', value: dataMap.dataTI['2007sum']}
                  ]}
              ]
          },
          {
              title : {
                text: '2008全国宏观经济指标',
                textStyle:{
                  color:'#FFF'
                }
              },
              series : [
                  {data: dataMap.dataGDP['2008']},
                  {data: dataMap.dataFinancial['2008']},
                  {data: dataMap.dataEstate['2008']},
                  {data: dataMap.dataPI['2008']},
                  {data: dataMap.dataSI['2008']},
                  {data: dataMap.dataTI['2008']},
                  {data: [
                      {name: '第一产业', value: dataMap.dataPI['2008sum']},
                      {name: '第二产业', value: dataMap.dataSI['2008sum']},
                      {name: '第三产业', value: dataMap.dataTI['2008sum']}
                  ]}
              ]
          },
          {
              title : {
                text: '2009全国宏观经济指标',
                textStyle:{
                  color:'#FFF'
                }
              },
              series : [
                  {data: dataMap.dataGDP['2009']},
                  {data: dataMap.dataFinancial['2009']},
                  {data: dataMap.dataEstate['2009']},
                  {data: dataMap.dataPI['2009']},
                  {data: dataMap.dataSI['2009']},
                  {data: dataMap.dataTI['2009']},
                  {data: [
                      {name: '第一产业', value: dataMap.dataPI['2009sum']},
                      {name: '第二产业', value: dataMap.dataSI['2009sum']},
                      {name: '第三产业', value: dataMap.dataTI['2009sum']}
                  ]}
              ]
          },
          {
              title : {
                text: '2010全国宏观经济指标',
                textStyle:{
                  color:'#FFF'
                }
              },
              series : [
                  {data: dataMap.dataGDP['2010']},
                  {data: dataMap.dataFinancial['2010']},
                  {data: dataMap.dataEstate['2010']},
                  {data: dataMap.dataPI['2010']},
                  {data: dataMap.dataSI['2010']},
                  {data: dataMap.dataTI['2010']},
                  {data: [
                      {name: '第一产业', value: dataMap.dataPI['2010sum']},
                      {name: '第二产业', value: dataMap.dataSI['2010sum']},
                      {name: '第三产业', value: dataMap.dataTI['2010sum']}
                  ]}
              ]
          },
          {
              title : {
                text: '2011全国宏观经济指标',
                textStyle:{
                  color:'#FFF'
                }
              },
              series : [
                  {data: dataMap.dataGDP['2011']},
                  {data: dataMap.dataFinancial['2011']},
                  {data: dataMap.dataEstate['2011']},
                  {data: dataMap.dataPI['2011']},
                  {data: dataMap.dataSI['2011']},
                  {data: dataMap.dataTI['2011']},
                  {data: [
                      {name: '第一产业', value: dataMap.dataPI['2011sum']},
                      {name: '第二产业', value: dataMap.dataSI['2011sum']},
                      {name: '第三产业', value: dataMap.dataTI['2011sum']}
                  ]}
              ]
          }
      ]
  };


  return (
    <div>
      <ReactEcharts
        option={option}
        style={{height: '50vh', width: '100%'}}
       />
    </div>
  );
}
export default Bar3;
